<template>
  <div class="time-picker">
    <div class="picker-container">
      <picker-view
        indicator-style="height:60rpx; border:none;"
        class="time-picker-view"
        :value="selectedIndexes"
        @change="timeChange"
      >
        <picker-view-column class="hours_column">
          <view class="hours_style" v-for="(hour, index) in hours" :key="index">{{ hour }} 时</view>
        </picker-view-column>
        <picker-view-column>
          <view class="minutes_style" v-for="(minute, index) in minutes" :key="index"
            >{{ minute }} 分</view
          >
        </picker-view-column>
      </picker-view>
    </div>
  </div>
</template>

<script setup>
import { nextTick, ref } from 'vue'
const hours = ref(Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0')))
const minutes = ref(Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')))
const emit = defineEmits(['timeChange'])
function timeChange(e) {
  let index = e.detail.value
  let changeValue = `${hours.value[index[0]] || '00'}:${minutes.value[index[1]] || '00'}`
  emit('timeChange', changeValue)
}
</script>

<style scoped>
.time-picker {
  width: 100%;
  position: relative;
}

.picker-container {
  background-color: #fff;
  display: flex;
  align-items: center;
  width: 100%;
}

.time-picker-view {
  width: 100%;
  height: 190rpx;
}
.hours_column {
  border: none;
}
.hours_style {
  /* height: 60rpx; */
  line-height: 60rpx;
  text-align: center;
  background: #f2f2f2;
  border-radius: 16rpx 0rpx 0rpx 16rpx;
}
.minutes_style {
  /* height: 60rpx; */
  line-height: 60rpx;
  text-align: center;
  background: #f2f2f2;
  border-radius: 0rpx 16rpx 16rpx 0rpx;
}
.uni-picker-view-indicator:before {
  border: none;
}
.uni-picker-view-indicator:after {
  border: none;
}
</style>
